<script setup>

import Page from "@/components/page/Page.vue";
import moduleJson from "@/components/page/moduleJson.js";
import {onMounted} from "vue";
import SettingService from "@/service/impl/SettingService.js";
import dataJson from "@/components/page/dataJson.js";
import UserSetting from "@/components/setting/UserSetting.vue";
import UserSettingModel from "@/model/UserSettingModel.js";
import ApplicationSetting from "@/components/setting/ApplicationSetting.vue";
import ApplicationSettingModel from "@/model/ApplicationSettingModel.js";

const module = moduleJson()
const data = dataJson()
const form = ref({
    user: new UserSettingModel(),
    application: new ApplicationSettingModel ()
})

const init = () => {
    SettingService.find().then(res => {
        form.value = res.data
    }).catch(e => {

    })
}
const onSave = () => {
    SettingService.update(form.value).then(res => {
        init()
    }).catch(e => {

    })
}

onMounted(() => {
    module.value.layout = {
        tableLeft: false,
        width: "0px",
        page: false,
        table: false,
        refresh: false
    }
    module.value.search.show = false
    init()
})

</script>

<template>
    <Page
        :data="data"
        :module="module"
        @on-show="init"
    >
        <template #operate-before>
            <el-button type="primary" @click="onSave">保存</el-button>
        </template>
        <template #table>
            <el-tabs type="border-card" style="height: 100vh">
                <el-form label-position="top">
                    <el-tab-pane label="用户安全设置">
                        <user-setting :user="form.user" />
                    </el-tab-pane>
                    <el-tab-pane label="应用安全设置">
                        <application-setting :application="form.application" />
                    </el-tab-pane>
                </el-form>
            </el-tabs>
        </template>
    </Page>

</template>

<style scoped lang="scss">

</style>